<template>
    <div class="messgaePopup">
        <van-popup round v-model:show="popupFlag" :style="{ padding: '10px 20px' }">
            <div class="messagePopup__title">{{ mode === "add" ? '新增地址' : "修改地址" }}</div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="收货人" label="收货人" placeholder="收货人" />
                    <van-field v-model="phone" type="phone" name="电话号码" label="电话号码" placeholder="电话号码" />
                    <van-field v-model="address" name="收货地址" label="收货地址" placeholder="收货地址" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block color="#ffcd41" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>
<script setup>
import { defineModel, ref } from 'vue';
const emit = defineEmits(["changeList"])
defineProps({
    mode: {
        type: String,
        default: "add"
    }
})
const popupFlag = defineModel();
const username = ref('');
const phone = ref('');
const address = ref('');

const onSubmit = () => {
    emit('changeList', {
        name: username.value,
        phone: phone.value,
        address: address.value
    })
}
</script>
<style lang="scss">
.messagePopup__title {
    text-align: center;
    color: $color-yellow;
    margin: 10rem auto 20rem;
    font-size: 24rem;
    font-weight: 700;
}
</style>